<template>
    <div class="productCode-searchfor-wrap">
        <el-form :model="searchfor" ref="searchfor" label-width="68px">
            <el-form-item prop="bus" :label="$t('m.label.BU')" label-width="40px">
                <BU
                    :form="searchfor"
                    formId="bus"
                    :multiple="true"
                    addSize="mini"
                    @selectAll="getCategory"
                    @selectDel="getCategory"
                    size="small"
                ></BU>
            </el-form-item>
            <el-form-item prop="categoryIds" :label="$t('m.label.productCategory')">
                <category
                    ref="category"
                    :form="searchfor"
                    formId="categoryIds"
                    formBU="bus"
                    :multiple="true"
                    @selectAll="getProduct"
                    @selectDel="getProduct"
                    addSize="mini"
                    size="small"
                ></category>
            </el-form-item>
            <el-form-item prop="modelNumbers" :label="$t('m.label.productModelNumber')">
                <product
                    ref="product"
                    formId="modelNumbers"
                    formBU="bus"
                    formCategory="categoryIds"
                    :form="searchfor"
                    :multiple="true"
                    @selectAll="getReverse"
                    @selectDel="getReverse"
                    addSize="mini"
                    size="small"
                ></product>
            </el-form-item>
            <el-form-item prop="countryIds" :label="$t('m.label.country')" label-width="50px">
                <country
                    :form="searchfor"
                    formId="countryIds"
                    :multiple="true"
                    addSize="mini"
                    size="small"
                ></country>
            </el-form-item>
            <el-form-item prop="userIds" :label="$t('m.label.principal')" label-width="60px">
                <el-select
                    v-model="searchfor.userIds"
                    multiple
                    collapse-tags
                    filterable
                    :placeholder="$t('m.placeholder.selectPrincipal')"
                    size="small"
                >
                    <allAddDelSelect
                        :selectForm="searchfor"
                        :selectArray="findByBuUser"
                        selectFormId="userIds"
                        selectArrayId="userId"
                        size="mini"
                    ></allAddDelSelect>
                    <template v-for="item in findByBuUser">
                        <el-option
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId"
                            v-if="item.userName !== ' '"
                        ></el-option>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item prop="status" :label="$t('m.label.productStatus')">
                <el-select
                    v-model="searchfor.status"
                    filterable
                    multiple
                    collapse-tags
                    :placeholder="$t('m.placeholder.selectProductStatus')"
                    size="small"
                >
                    <allAddDelSelect
                        :selectForm="searchfor"
                        :selectArray="findStatus"
                        selectFormId="status"
                        selectArrayId="id"
                        size="mini"
                    ></allAddDelSelect>
                    <el-option
                        v-for="item in findStatus"
                        :key="item.key"
                        :label="item | statusTxt"
                        :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="0">
                <el-button
                    type="primary"
                    @click="submitForm"
                    icon="el-icon-search"
                    size="small"
                >{{$t('m.button.search')}}</el-button>
            </el-form-item>
            <el-form-item label-width="0">
                <el-button
                    @click="resetForm('searchfor')"
                    icon="el-icon-circle-close"
                    size="small"
                >{{$t('m.button.reset')}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { BU, category, product, country } from "components/searchfor";
const ERR_OK = 200;
let vn = "";
export default {
    data() {
        vn = this;
        return {
            searchfor: {
                bus: [],
                categoryIds: [],
                countryIds: [],
                modelNumbers: [],
                status: [],
                userIds: [],
                userId: this.$store.getters.userId
            },
            findByBuUser: [],
            findStatus: [],
            modelNumbers: []
        };
    },
    filters: {
        statusTxt(val) {
            switch (val) {
                case 0:
                    return vn.$t("m.label.inactivated");
                    break;
                case -1:
                    return vn.$t("m.label.delete");
                    break;
                case 2:
                    return vn.$t("m.label.pendingProject");
                    break;
                case 3:
                    return vn.$t("m.label.waitingForOnline");
                    break;
                case 1:
                    return vn.$t("m.label.goOnline");
                    break;
                case -2:
                    return vn.$t("m.label.OffShelf");
                    break;
                case -3:
                    return vn.$t("m.label.cancelProjects");
                    break;
                default:
                    return vn.$t("m.label.other");
                    break;
            }
        }
    },
    created() {
        this._findBu();
        this.findByBu();
    },
    methods: {
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
            this.findByBu();
        },
        getProduct() {
            this.$refs.category.getCategory(true);
            this.$refs.product.getProduct();
        },
        getReverse(arr) {
            this.modelNumbers = arr;
            this.$refs.product.getProduct(true);
        },
        // 查询状态
        _findBu() {
            this.$ajax
                .get(
                    this.GLOBAL.profitMeasurementService +
                        "/search/findBu?userId=" +
                        this.$store.getters.userId
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.findStatus = res.data.data.status;
                    }
                });
        },
        // 查询系列数据和对应的负责人
        findByBu() {
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.profitMeasurementService +
                    "/search/findByBu?buIds=" +
                    this.searchfor.bus.join()
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.findByBuUser = [];
                    res.data.data.user.forEach(item => {
                        if (item) {
                            this.findByBuUser.push(item);
                        }
                    });
                }
            });
        },
        // 提交搜索
        submitForm() {
            let formData = JSON.parse(JSON.stringify(this.searchfor));
            formData.modelNumbers = this.modelNumbers
                .filter(
                    item =>
                        !formData.modelNumbers.every(
                            el => item.productId !== el
                        )
                )
                .map(item => item.productModelNumber);
            this.$emit("submitForm", formData);
        },
        // 重置条件
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCategory();
        }
    },
    components: {
        BU,
        category,
        product,
        country,
        allAddDelSelect: resolve =>
            require(["components/searchfor/allAddDelSelect.vue"], resolve)
    }
};
</script>

<style lang="stylus" scoped>
.el-form {
    margin-bottom: 10px;

    .el-form-item {
        display: inline-block;
        margin-bottom: 0;

        .el-select {
            max-width: 180px;
        }
    }
}
</style>

